@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #6366F1;
  --secondary-color: #F59E0B;
  --accent-color: #EC4899;
  --dark-color: #1F2937;
  --light-color: #F9FAFB;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark-color);
  background-color: var(--light-color);
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}